<template>
  <div class="enterprises-list">
    <el-card>
      <el-form ref="form" :model="form" :inline="true">
        <el-form-item label="企业编号" prop="eid">
          <el-input v-model="form.eid" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="企业名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="创建者" prop="username">
          <el-input v-model="form.username" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="form.status" placeholder="请选择">
            <el-option v-for="item in enterpiseData.EnterpriseStatus" :key="item.id" :label="item.value" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <div class="btn">
        <el-button type="primary" @click="onEvent">搜索</el-button>
        <el-button type="danger" @click="$refs.form.resetFields()">清除</el-button>
        <el-button type="primary" @click="addEvent">+新增企业</el-button>
        <el-button v-print="{id:'info',popTitle:'企业列表信息'}" type="primary">打印</el-button>
      </div>
    </el-card>
    <div id="info">
      <el-card class="bottom">
        <el-table :data="list">
          <el-table-column label="序号">
            <template #default="{$index}">
              <div>
                {{ (page.page-1)*page.limit+$index+1 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="eid" label="企业编号" />
          <el-table-column prop="name" label="企业名称" />
          <el-table-column prop="username" label="创建者" />
          <el-table-column prop="status" label="状态" :formatter="stateChange">
            <template #default="{row}">
              <div :style="{color:row.status===0?'red':''}">
                {{ row.status===0?'禁用':'启用' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="260px">
            <template #default="{row}">
              <div>
                <el-button size="small" type="success" @click="editEvent(row)">编辑</el-button>
                <el-button size="small" type="info" @click="EthEvent(row.id)">{{ row.status === 0 ? '启用' : '禁用' }}</el-button>
                <el-button size="small" type="danger" @click="delEvent(row.id)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
            :current-page.sync="page.page"
            :page-sizes="[1,2,5,10,100]"
            :page-size.sync="page.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="sizeChange"
            @current-change="getData"
          />
        </div>
      </el-card>
    </div>
    <!-- 新增企业弹框 -->
    <!-- <Add :is-show="isShow" @update:isShow="isShow=$event" /> -->
    <Add ref="add" :is-show.sync="isShow" :initlist="initlist" @getData="getData" />
  </div>
</template>

<script>
import jsCookie from 'js-cookie'
import Add from './components/add.vue'
import { enterpriseList, enterpriseRemove, enterpriseStatus } from '@/api/enterprises'
import enterpiseData from './constant/enterpise'
export default {
  components: {
    Add
  },
  data() {
    return {
      enterpiseData,
      initlist: [],
      list: [],
      isShow: false,
      form: {
        eid: '',	// 企业id
        name: '',	// 企业名称
        username: '',	// 用户名
        status: ''	// 状态 1（启用） 0（禁用）
      },
      page: {
        page: 1,	// 页码 默认为1
        limit: +jsCookie.get('page') || 10	// 页尺寸 默认为10
      },
      total: 100
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 新增事件------------------------------
    addEvent() {
      this.isShow = true
      this.$refs.add.mode = 'add'
    },
    // 查询企业--------------------------------
    async getData() {
      const res = await enterpriseList(this.page)
      this.list = res.data.items
      this.initlist = res.data.items
      this.total = res.data.pagination.total
      console.log('查询企业列表', res)
    },
    // 编辑事件-------------------------------
    editEvent(row) {
      this.isShow = true
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
      this.$refs.add.mode = 'edit'
    },
    // 删除事件----------------------------
    async delEvent(id) {
      // console.log('id', id)
      await this.$confirm('您确定要删除吗?', '温馨提示')
      const res = await enterpriseRemove({
        id: id
      })
      console.log('res', res)
      this.$message.success('删除成功')
      if (this.page.page > 1 && this.list.length === 1) {
        this.page.page--
      }
      this.getData()
    },
    // 禁用事件-----------------------------
    async EthEvent(id) {
      const row = await this.list.find(item => item.id === id)
      if (row) {
        const bol = row.status === 1 ? 0 : 1
        await enterpriseStatus({ id, status: bol })
        row.status = bol
        this.$message.success(row.status === 1 ? '状态启用成功' : '状态禁用成功')
      }
    },
    // 搜索事件----------------------------------
    async  onEvent() {
      await enterpriseList({ ...this.page, ...this.form }).then((res) => {
        this.list = res.data.items
        this.total = res.data.pagination.total
        console.log('搜索结果', res)
      })
    },
    // 页容量持久化----------------------------
    sizeChange() {
      this.getData()
      jsCookie.set('page', this.page.limit)
    },
    // 企业状态转换----------------------
    stateChange(row, column, cellValue, index) {
      const findItem = enterpiseData.EnterpriseStatus.find(item => +item.id === +cellValue)
      return findItem ? findItem.value : '-'
    }
  }
}
</script>

<style lang="scss" scoped>
.enterprises-list{
.bottom{
    margin-top: 10px;
  }
  .page{
    margin-top: 10px;
    text-align: center;
  }
}
</style>
